// 最大屏幕1920及以上
@media screen and (min-width: 1919px) {
  .responsive {
    @apply w-screen flex;

    .responsive-left {
      @apply flex-1;
    }
    .responsive-right {
      @apply flex-1;
    }
    .responsive-center {
      @apply shrink-0;
      width: 1824px;
      .items {
        @apply w-full;
        .item {
          @apply mr-3;
          width: 292px;
          height: 438px;
        }
        .itemWidth {
          @apply mr-3;
          width: 292px;
        }
        .itemLive {
          @apply mr-3;
          width: 292px;
          height: 164px;
        }
      }
    }
  }
}

// 6个
@media screen and (min-width: 1617px) and (max-width: 1919px) {
  .responsive {
    @apply w-screen flex;

    .responsive-left {
      @apply shrink-0;
      width: 54px;
    }
    .responsive-right {
      @apply shrink-0;
      width: 42px;
    }
    .responsive-center {
      @apply flex-1;
      .items {
        @apply w-full;
        .item {
          @apply mr-3;
          width: calc((100% - 72px) / 6);
          height: calc(((100vw - 168px) / 6) * 1.5);
        }
        .itemWidth {
          @apply mr-3;
          width: calc((100% - 72px) / 6);
        }
        .itemLive {
          @apply mr-3;
          width: calc((100% - 72px) / 6);
          height: calc(((100vw - 168px) / 6) * 0.5616);
        }
      }
    }
  }
}

// 5个排布
@media screen and (min-width: 1313px) and (max-width: 1617px) {
  .responsive {
    @apply w-screen flex;

    .responsive-left {
      @apply shrink-0;
      width: 54px;
    }
    .responsive-right {
      @apply shrink-0;
      width: 42px;
    }
    .responsive-center {
      @apply flex-1;
      .items {
        @apply w-full;
        .item {
          @apply mr-3;
          width: calc((100% - 60px) / 5);
          height: calc(((100vw - 156px) / 5) * 1.5);
        }
        .itemWidth {
          @apply mr-3;
          width: calc((100% - 60px) / 5);
        }
        .itemLive {
          @apply mr-3;
          width: calc((100% - 60px) / 5);
          height: calc(((100vw - 156px) / 5) * 0.5616);
        }
      }
    }
  }
}

// 4个排布
@media screen and (min-width: 767px) and (max-width: 1313px) {
  .responsive {
    @apply w-screen flex;

    .responsive-left {
      @apply shrink-0;
      width: 54px;
    }
    .responsive-right {
      @apply shrink-0;
      width: 42px;
    }
    .responsive-center {
      @apply flex-1;
      .items {
        @apply w-full;
        .item {
          @apply mr-3;
          width: calc((100% - 48px) / 4);
          height: calc(((100vw - 144px) / 4) * 1.5);
        }
        .itemWidth {
          @apply mr-3;
          width: calc((100% - 48px) / 4);
        }
        .itemLive {
          @apply mr-3;
          width: calc((100% - 48px) / 4);
          height: calc(((100vw - 144px) / 4) * 0.5616);
        }
      }
    }
  }
}

// 移动端 三个排布
@media screen and (max-width: 767px) {
  .responsive {
    @apply w-screen flex;

    .responsive-left {
      @apply w-0;
    }
    .responsive-right {
      @apply w-0;
    }
    .responsive-center {
      @apply w-screen  m-0;
      .items {
        @apply w-screen pl-4;
        .item {
          @apply mr-2;
          width: calc((100vw - 48px) / 3);
          height: calc(((100vw - 48px) / 3) * 1.5);
        }
        .itemWidth {
          @apply mr-2;
          width: calc((100vw - 48px) / 3);
        }
        .itemLive {
          @apply mr-2;
          width: calc((100vw - 48px) / 3);
          height: calc(((100vw - 48px) / 3) * 0.5616);
        }
      }
    }
  }
}
